<template>
	<view>
		<view class="subsection">
			<view :class="['subsection3', { active: activeSection3 === 'section3' }]" @click="setActive3('section3')">
				<view>进水</view>
			</view>
			<view :class="['subsection4', { active: activeSection3 === 'section4' }]" @click="setActive3('section4')">
				<view>出水</view>
			</view>
		</view>
		<view class="grid" v-for="(item,index) in waterWqList" :key="index">
			<view class="grid-container">
				<view class="grid-text">
					<u-avatar class="main-img" :size="84" :src="item.imagUrl"></u-avatar>
					<view class="grid-text2">{{item.title}}</view>
					<view class="grid-text3"><span>( </span>{{item.unit}}<span>)</span></view>
				</view>
				<view class="grid-value">
					<view class="grid-value1">{{item.value}}</view>
					<view class="grid-value2">{{formattedTime}}</view>
				</view>
			</view>
			<u-gap height="5" bg-color="#f5f5f5"></u-gap>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			inflowWater: {
				type: Array,
				required: true
			},
			outWater: {
				type: Array,
				required: true
			},
			formattedTime: {
				type: String,
				required: true
			},
			active: {
				type: String,
				required: true
			}
		},
		data() {
			return {
				activeSection3: 'section3'
			}
		},
		computed: {
			waterWqList() {
				return this.activeSection3 === 'section3' ? this.inflowWater : this.outWater;
			}
		},
		methods: {
			setActive3(section) {
				this.activeSection3 = section;
			}
		}

	}
</script>

<style lang="scss">
	@import '@/pages/sys/index/index/styles/mainData.scss';
</style>